<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>像素头像编辑器 - 功能演示</title>
  <style>
    :root {
      --primary: #4f46e5;
      --secondary: #8b5cf6;
      --accent: #ec4899;
      --success: #10b981;
      --warning: #f59e0b;
      --info: #06b6d4;
      --text: #1e293b;
      --light: #f8fafc;
      --dark: #0f172a;
      --card-bg: rgba(255, 255, 255, 0.95);
      --shadow: 0 8px 32px rgba(60, 60, 120, 0.15);
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      background: linear-gradient(135deg, #e0e7ff 0%, #d1d5ff 100%);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      padding: 20px;
      position: relative;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: var(--card-bg);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }
    
    .container::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
      border-radius: 50%;
      opacity: 0.1;
      z-index: 0;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 2;
    }
    
    .header h1 {
      font-size: 2.5rem;
      color: var(--primary);
      margin-bottom: 10px;
      font-weight: bold;
      text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .header p {
      font-size: 1.1rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }
    
    .feature-card {
      background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.8);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }
    
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }
    
    .feature-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: white;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
    }
    
    .feature-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 12px;
    }
    
    .feature-desc {
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    .feature-list {
      list-style: none;
      padding: 0;
    }
    
    .feature-list li {
      padding: 6px 0;
      color: #64748b;
      position: relative;
      padding-left: 20px;
    }
    
    .feature-list li::before {
      content: '✨';
      position: absolute;
      left: 0;
      top: 6px;
    }
    
    .demo-section {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border-radius: 20px;
      padding: 30px;
      margin-bottom: 30px;
      text-align: center;
    }
    
    .demo-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #92400e;
      margin-bottom: 20px;
    }
    
    .pixel-canvas {
      display: inline-block;
      background: #f3f4f6;
      border-radius: 12px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
    
    .pixel-grid {
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      gap: 1px;
      width: 256px;
      height: 256px;
      background: #e5e7eb;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .pixel {
      width: 16px;
      height: 16px;
      background: #fff;
      transition: background-color 0.2s ease;
    }
    
    .pixel.filled {
      background: #4f46e5;
    }
    
    .pixel.skin {
      background: #ffd1dc;
    }
    
    .pixel.hair {
      background: #8b4513;
    }
    
    .pixel.eye {
      background: #000;
    }
    
    .pixel.mouth {
      background: #ff6b6b;
    }
    
    .tool-panel {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 20px 0;
      flex-wrap: wrap;
    }
    
    .tool-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 12px;
      background: white;
      color: #4f46e5;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .tool-btn:hover {
      background: #4f46e5;
      color: white;
      transform: translateY(-2px);
    }
    
    .tool-btn.active {
      background: #4f46e5;
      color: white;
    }
    
    .color-palette {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 20px 0;
      flex-wrap: wrap;
    }
    
    .color-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .color-btn:hover {
      transform: scale(1.1);
    }
    
    .color-btn.active {
      border-color: #fbbf24;
      transform: scale(1.1);
    }
    
    .usage-steps {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border-radius: 20px;
      padding: 30px;
      margin-bottom: 30px;
    }
    
    .usage-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1e40af;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .step-list {
      list-style: none;
      padding: 0;
    }
    
    .step-list li {
      padding: 12px 0;
      color: #1e40af;
      font-weight: 500;
      position: relative;
      padding-left: 40px;
      margin-bottom: 8px;
    }
    
    .step-list li::before {
      content: counter(step-counter);
      counter-increment: step-counter;
      position: absolute;
      left: 0;
      top: 12px;
      width: 24px;
      height: 24px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
    
    .step-list {
      counter-reset: step-counter;
    }
    
    .cta-section {
      text-align: center;
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border-radius: 20px;
      padding: 40px;
      margin-top: 30px;
    }
    
    .cta-title {
      font-size: 1.8rem;
      font-weight: 600;
      color: #92400e;
      margin-bottom: 16px;
    }
    
    .cta-desc {
      color: #92400e;
      margin-bottom: 24px;
      font-size: 1.1rem;
    }
    
    .cta-btn {
      display: inline-block;
      padding: 16px 32px;
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: white;
      text-decoration: none;
      border-radius: 16px;
      font-weight: 600;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
    }
    
    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
    }
    
    @media (max-width: 768px) {
      .container {
        padding: 20px;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      
      .pixel-grid {
        width: 200px;
        height: 200px;
      }
      
      .pixel {
        width: 12.5px;
        height: 12.5px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🎨 像素头像编辑器</h1>
      <p>在原子魔方中体验全新的像素头像创作功能，打造专属于你的独特头像！</p>
    </div>
    
    <div class="feature-grid">
      <div class="feature-card">
        <div class="feature-icon">✏️</div>
        <div class="feature-title">多种绘画工具</div>
        <div class="feature-desc">提供画笔、橡皮擦、填充、吸管等多种专业工具，满足不同创作需求。</div>
        <ul class="feature-list">
          <li>画笔工具 - 自由绘制像素</li>
          <li>橡皮擦 - 精确擦除像素</li>
          <li>填充工具 - 快速填充区域</li>
          <li>吸管工具 - 取色功能</li>
        </ul>
      </div>
      
      <div class="feature-card">
        <div class="feature-icon">🎨</div>
        <div class="feature-title">丰富颜色选择</div>
        <div class="feature-desc">内置12种精选颜色，从基础色到特殊色，为你的创作提供无限可能。</div>
        <ul class="feature-list">
          <li>12种预设颜色</li>
          <li>实时颜色预览</li>
          <li>颜色选择器</li>
          <li>自定义颜色支持</li>
        </ul>
      </div>
      
      <div class="feature-card">
        <div class="feature-icon">💾</div>
        <div class="feature-title">保存与加载</div>
        <div class="feature-desc">支持头像的保存和加载功能，让你的作品永不丢失。</div>
        <ul class="feature-list">
          <li>本地保存头像</li>
          <li>快速加载作品</li>
          <li>作品管理</li>
          <li>导出功能</li>
        </ul>
      </div>
      
      <div class="feature-card">
        <div class="feature-icon">🎭</div>
        <div class="feature-title">32x32像素画布</div>
        <div class="feature-desc">采用经典的32x32像素画布，既保证了细节表现，又确保了创作效率。</div>
        <ul class="feature-list">
          <li>1024个像素点</li>
          <li>高清显示效果</li>
          <li>精确像素控制</li>
          <li>实时预览</li>
        </ul>
      </div>
    </div>
    
    <div class="demo-section">
      <div class="demo-title">🎨 功能演示</div>
      <div class="pixel-canvas">
        <div class="pixel-grid" id="demoCanvas">
          <!-- 像素网格将通过JavaScript生成 -->
        </div>
      </div>
      
      <div class="tool-panel">
        <button class="tool-btn active" data-tool="pen">✏️ 画笔</button>
        <button class="tool-btn" data-tool="eraser">🧽 橡皮擦</button>
        <button class="tool-btn" data-tool="fill">🪣 填充</button>
        <button class="tool-btn" data-tool="eyedropper">🎨 吸管</button>
      </div>
      
      <div class="color-palette">
        <div class="color-btn active" style="background: #000000;" data-color="#000000"></div>
        <div class="color-btn" style="background: #FFFFFF;" data-color="#FFFFFF"></div>
        <div class="color-btn" style="background: #FF0000;" data-color="#FF0000"></div>
        <div class="color-btn" style="background: #00FF00;" data-color="#00FF00"></div>
        <div class="color-btn" style="background: #0000FF;" data-color="#0000FF"></div>
        <div class="color-btn" style="background: #FFFF00;" data-color="#FFFF00"></div>
        <div class="color-btn" style="background: #800080;" data-color="#800080"></div>
        <div class="color-btn" style="background: #FFA500;" data-color="#FFA500"></div>
        <div class="color-btn" style="background: #FFC0CB;" data-color="#FFC0CB"></div>
        <div class="color-btn" style="background: #A52A2A;" data-color="#A52A2A"></div>
        <div class="color-btn" style="background: #808080;" data-color="#808080"></div>
        <div class="color-btn" style="background: #00FFFF;" data-color="#00FFFF"></div>
      </div>
      
      <button class="tool-btn" onclick="createSampleAvatar()">🎭 生成示例头像</button>
      <button class="tool-btn" onclick="clearCanvas()">🗑️ 清空画布</button>
    </div>
    
    <div class="usage-steps">
      <div class="usage-title">📖 使用步骤</div>
      <ul class="step-list">
        <li>打开原子魔方页面，点击"像素头像"功能入口</li>
        <li>选择绘画工具（画笔、橡皮擦、填充、吸管）</li>
        <li>从颜色面板中选择合适的颜色</li>
        <li>在32x32像素画布上点击绘制你的头像</li>
        <li>使用填充工具快速填充大面积区域</li>
        <li>使用吸管工具取色，保持颜色一致性</li>
        <li>完成后点击"保存头像"按钮</li>
        <li>输入头像名称，确认保存</li>
        <li>可以随时加载已保存的头像继续编辑</li>
      </ul>
    </div>
    
    <div class="cta-section">
      <div class="cta-title">🚀 立即体验</div>
      <div class="cta-desc">在原子魔方中开启你的像素头像创作之旅，打造独一无二的数字艺术品！</div>
      <a href="atomic-cube.html" class="cta-btn">进入原子魔方</a>
    </div>
  </div>
  
  <script>
    // 初始化像素画布
    const canvas = document.getElementById('demoCanvas');
    const canvasSize = 16;
    let currentTool = 'pen';
    let currentColor = '#000000';
    let pixels = [];
    
    // 生成像素网格
    for (let y = 0; y < canvasSize; y++) {
      for (let x = 0; x < canvasSize; x++) {
        const pixel = document.createElement('div');
        pixel.className = 'pixel';
        pixel.dataset.x = x;
        pixel.dataset.y = y;
        pixel.addEventListener('click', handlePixelClick);
        canvas.appendChild(pixel);
      }
    }
    
    // 处理像素点击
    function handlePixelClick(event) {
      const pixel = event.target;
      const x = parseInt(pixel.dataset.x);
      const y = parseInt(pixel.dataset.y);
      
      if (currentTool === 'pen') {
        pixel.style.background = currentColor;
        pixel.classList.add('filled');
      } else if (currentTool === 'eraser') {
        pixel.style.background = '#fff';
        pixel.classList.remove('filled');
      } else if (currentTool === 'eyedropper') {
        currentColor = pixel.style.background;
        document.querySelector('.color-btn.active').classList.remove('active');
        document.querySelector(`[data-color="${currentColor}"]`).classList.add('active');
      }
    }
    
    // 工具切换
    document.querySelectorAll('.tool-btn[data-tool]').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.tool-btn[data-tool]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentTool = btn.dataset.tool;
      });
    });
    
    // 颜色选择
    document.querySelectorAll('.color-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentColor = btn.dataset.color;
      });
    });
    
    // 生成示例头像
    function createSampleAvatar() {
      clearCanvas();
      
      // 创建简单的头像示例
      const samplePixels = [
        // 头发
        {x: 4, y: 2, color: '#8b4513'}, {x: 5, y: 2, color: '#8b4513'}, {x: 6, y: 2, color: '#8b4513'}, {x: 7, y: 2, color: '#8b4513'}, {x: 8, y: 2, color: '#8b4513'}, {x: 9, y: 2, color: '#8b4513'}, {x: 10, y: 2, color: '#8b4513'}, {x: 11, y: 2, color: '#8b4513'},
        {x: 3, y: 3, color: '#8b4513'}, {x: 4, y: 3, color: '#8b4513'}, {x: 5, y: 3, color: '#8b4513'}, {x: 6, y: 3, color: '#8b4513'}, {x: 7, y: 3, color: '#8b4513'}, {x: 8, y: 3, color: '#8b4513'}, {x: 9, y: 3, color: '#8b4513'}, {x: 10, y: 3, color: '#8b4513'}, {x: 11, y: 3, color: '#8b4513'}, {x: 12, y: 3, color: '#8b4513'},
        
        // 脸部
        {x: 4, y: 4, color: '#ffd1dc'}, {x: 5, y: 4, color: '#ffd1dc'}, {x: 6, y: 4, color: '#ffd1dc'}, {x: 7, y: 4, color: '#ffd1dc'}, {x: 8, y: 4, color: '#ffd1dc'}, {x: 9, y: 4, color: '#ffd1dc'}, {x: 10, y: 4, color: '#ffd1dc'}, {x: 11, y: 4, color: '#ffd1dc'},
        {x: 4, y: 5, color: '#ffd1dc'}, {x: 5, y: 5, color: '#ffd1dc'}, {x: 6, y: 5, color: '#ffd1dc'}, {x: 7, y: 5, color: '#ffd1dc'}, {x: 8, y: 5, color: '#ffd1dc'}, {x: 9, y: 5, color: '#ffd1dc'}, {x: 10, y: 5, color: '#ffd1dc'}, {x: 11, y: 5, color: '#ffd1dc'},
        {x: 4, y: 6, color: '#ffd1dc'}, {x: 5, y: 6, color: '#ffd1dc'}, {x: 6, y: 6, color: '#ffd1dc'}, {x: 7, y: 6, color: '#ffd1dc'}, {x: 8, y: 6, color: '#ffd1dc'}, {x: 9, y: 6, color: '#ffd1dc'}, {x: 10, y: 6, color: '#ffd1dc'}, {x: 11, y: 6, color: '#ffd1dc'},
        {x: 4, y: 7, color: '#ffd1dc'}, {x: 5, y: 7, color: '#ffd1dc'}, {x: 6, y: 7, color: '#ffd1dc'}, {x: 7, y: 7, color: '#ffd1dc'}, {x: 8, y: 7, color: '#ffd1dc'}, {x: 9, y: 7, color: '#ffd1dc'}, {x: 10, y: 7, color: '#ffd1dc'}, {x: 11, y: 7, color: '#ffd1dc'},
        {x: 4, y: 8, color: '#ffd1dc'}, {x: 5, y: 8, color: '#ffd1dc'}, {x: 6, y: 8, color: '#ffd1dc'}, {x: 7, y: 8, color: '#ffd1dc'}, {x: 8, y: 8, color: '#ffd1dc'}, {x: 9, y: 8, color: '#ffd1dc'}, {x: 10, y: 8, color: '#ffd1dc'}, {x: 11, y: 8, color: '#ffd1dc'},
        {x: 4, y: 9, color: '#ffd1dc'}, {x: 5, y: 9, color: '#ffd1dc'}, {x: 6, y: 9, color: '#ffd1dc'}, {x: 7, y: 9, color: '#ffd1dc'}, {x: 8, y: 9, color: '#ffd1dc'}, {x: 9, y: 9, color: '#ffd1dc'}, {x: 10, y: 9, color: '#ffd1dc'}, {x: 11, y: 9, color: '#ffd1dc'},
        {x: 4, y: 10, color: '#ffd1dc'}, {x: 5, y: 10, color: '#ffd1dc'}, {x: 6, y: 10, color: '#ffd1dc'}, {x: 7, y: 10, color: '#ffd1dc'}, {x: 8, y: 10, color: '#ffd1dc'}, {x: 9, y: 10, color: '#ffd1dc'}, {x: 10, y: 10, color: '#ffd1dc'}, {x: 11, y: 10, color: '#ffd1dc'},
        
        // 眼睛
        {x: 6, y: 6, color: '#000000'}, {x: 9, y: 6, color: '#000000'},
        
        // 嘴巴
        {x: 7, y: 9, color: '#ff6b6b'}, {x: 8, y: 9, color: '#ff6b6b'},
        
        // 身体
        {x: 5, y: 11, color: '#4f46e5'}, {x: 6, y: 11, color: '#4f46e5'}, {x: 7, y: 11, color: '#4f46e5'}, {x: 8, y: 11, color: '#4f46e5'}, {x: 9, y: 11, color: '#4f46e5'}, {x: 10, y: 11, color: '#4f46e5'},
        {x: 5, y: 12, color: '#4f46e5'}, {x: 6, y: 12, color: '#4f46e5'}, {x: 7, y: 12, color: '#4f46e5'}, {x: 8, y: 12, color: '#4f46e5'}, {x: 9, y: 12, color: '#4f46e5'}, {x: 10, y: 12, color: '#4f46e5'},
        {x: 5, y: 13, color: '#4f46e5'}, {x: 6, y: 13, color: '#4f46e5'}, {x: 7, y: 13, color: '#4f46e5'}, {x: 8, y: 13, color: '#4f46e5'}, {x: 9, y: 13, color: '#4f46e5'}, {x: 10, y: 13, color: '#4f46e5'},
      ];
      
      samplePixels.forEach(pixel => {
        const element = document.querySelector(`[data-x="${pixel.x}"][data-y="${pixel.y}"]`);
        element.style.background = pixel.color;
        element.classList.add('filled');
      });
    }
    
    // 清空画布
    function clearCanvas() {
      document.querySelectorAll('.pixel').forEach(pixel => {
        pixel.style.background = '#fff';
        pixel.classList.remove('filled');
      });
    }
  </script>
</body>
</html> 